import { useState } from "react";

export const Counter = () => {
  const [count, setCount] = useState(10)
  const [name, setName] = useState('wxq')
  const [books, setBook] = useState([
    { id: 1, name: '大鱼海棠' },
    { id: 2, name: '福尔摩斯' },
    { id: 3, name: '墨菲定律' }
  ])
  const [person, setPerson] = useState({ name: 'Rose', age: 18 });
  const [jsx, setJsx] = useState(<h2>我是引入的JSX</h2>);
  console.log('=======');
  const changeName = (e, newNames) => {
    // console.log(e);
    setName(newNames)
  }
  const changeBooks = () => {
    setBook([...books, { id: 4, name: '微表情' }])
  }
  const changePerson = () => {
    setPerson({ ...person, age: 22 })
  }
  const changeJsx = () => {
    setJsx(<h1>我是新的JSX</h1>);
  };
  return (
    <div>
      <h1>{count}</h1>
      <div>{(() => { console.log('render') })()}</div>
      <button onClick={() => setCount(20)}>+1</button>
      <h1>{name}</h1>
      <button onClick={(e) => changeName(e, 'zy')}>name</button>
      {books.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
      <button onClick={changeBooks}>Books</button>
      <h1>{person.name},{person.age}</h1>
      <button onClick={changePerson}>Rose</button>
      {jsx}
      <button onClick={changeJsx}>Jsx</button>

    </div>
  )
}